<template>
  <div class="content-wrapper">
    <div class="top-search-box">
      <!-- 高级查询 -->
      <a-form v-bind="layout" ref="formRef" :model="queryForm">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item label="用户">
              <AvicCommonSelect
                v-model:value="queryForm.demoUserId"
                type="userSelect"
                placeholder="请选择用户"
                :default-show-value="queryForm.demoUserIdAlias"
                @callback="
                  (result) => {
                    queryForm.demoUserIdAlias = result.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item label="标题">
              <a-input v-model:value="queryForm.demoTitle" placeholder="请输入标题" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item label="部门">
              <AvicCommonSelect
                v-model:value="queryForm.demoDeptId"
                type="deptSelect"
                placeholder="请选择部门"
                :default-show-value="queryForm.demoDeptIdAlias"
                @callback="
                  (result) => {
                    queryForm.demoDeptIdAlias = result.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="角色">
              <AvicCommonSelect
                v-model:value="queryForm.demoRoleId"
                type="roleSelect"
                placeholder="请选择角色"
                :default-show-value="queryForm.demoRoleIdAlias"
                @callback="
                  (result) => {
                    queryForm.demoRoleIdAlias = result.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="群组">
              <AvicCommonSelect
                v-model:value="queryForm.demoGroupId"
                type="groupSelect"
                placeholder="请选择群组"
                :default-show-value="queryForm.demoGroupIdAlias"
                @callback="
                  (result) => {
                    queryForm.demoGroupIdAlias = result.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="岗位">
              <AvicCommonSelect
                v-model:value="queryForm.demoPositionId"
                type="positionSelect"
                placeholder="请选择岗位"
                :default-show-value="queryForm.demoPositionIdAlias"
                @callback="
                  (result) => {
                    queryForm.demoPositionIdAlias = result.names;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="单选">
              <a-select
                v-model:value="queryForm.demoRadio"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择单选"
              >
                <a-select-option v-for="item in lookupList?.PLATFORM_SEX" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="单选（按钮）">
              <a-select
                v-model:value="queryForm.demoRadioButton"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择单选（按钮）"
              >
                <a-select-option v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="下拉">
              <a-select
                v-model:value="queryForm.demoSelect"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择下拉"
              >
                <a-select-option v-for="item in lookupList?.PLATFORM_DEGREE" :key="item.sysLookupTlId" :value="item.lookupCode">
                  {{ item.lookupName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="密级">
              <AvicSecretSelect
                v-model:value="queryForm.secretLevel"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="label"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择密级"
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="开关">
              <a-select
                v-model:value="queryForm.demoSwitch"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                option-filter-prop="children"
                :show-search="true"
                :allow-clear="true"
                placeholder="请选择开关"
              >
                <a-select-option value="Y">有效</a-select-option>
                <a-select-option value="N">无效</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="日期(起)">
              <a-date-picker
                v-model:value="queryForm.demoDateBegin"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期(起)"
                :disabled-date="(startValue) => proxy.$disabledStartDate(startValue, queryForm.demoDateEnd)"
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="日期(止)">
              <a-date-picker
                v-model:value="queryForm.demoDateEnd"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期(止)"
                :disabled-date="(endValue) => proxy.$disabledEndDate(endValue, queryForm.demoDateBegin)"
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="日期时间(起)">
              <a-date-picker
                v-model:value="queryForm.demoDateTimeBegin"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期时间(起)"
                :disabled-date="(startValue) => proxy.$disabledStartDate(startValue, queryForm.demoDateTimeEnd)"
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="日期时间(止)">
              <a-date-picker
                v-model:value="queryForm.demoDateTimeEnd"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期时间(止)"
                :disabled-date="(endValue) => proxy.$disabledEndDate(endValue, queryForm.demoDateTimeBegin)"
              />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="必填">
              <a-input v-model:value="queryForm.demoNotnull" placeholder="请输入必填" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="编码">
              <a-input v-model:value="queryForm.demoCode" placeholder="请输入编码" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="电话(正则)">
              <a-input v-model:value="queryForm.demoPhone" placeholder="请输入电话(正则)" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="邮箱(正则)">
              <a-input v-model:value="queryForm.demoEmail" placeholder="请输入邮箱(正则)" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="网址(正则)">
              <a-input v-model:value="queryForm.demoWebsite" placeholder="请输入网址(正则)" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-show="advanced" v-bind="colLayout.cols">
            <a-form-item label="唯一值">
              <a-input v-model:value="queryForm.demoUnique" placeholder="请输入唯一值" :allow-clear="true" @pressEnter="handleQuery" />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols" style="margin-left: auto">
            <div class="table-page-search-submitButtons">
              <a-space>
                <AvicAdvancedQueryButton
                  table-key="demoTreegrid"
                  :query-form="queryForm"
                  :advanced="advanced"
                  @select="
                    (value, advancedFlag) => {
                      queryForm = value;
                      advanced = !advanced ? advancedFlag : advanced;
                    }
                  "
                  @search="handleQuery"
                />
                <a-button type="primary" ghost @click="resetQuery">
                  <redo-outlined />
                  重置
                </a-button>
                <a-button type="link" style="margin: 0" @click="toggleAdvanced">
                  {{ advanced ? '收起' : '展开' }}
                  <up-outlined v-if="advanced" />
                  <down-outlined v-else />
                </a-button>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 树形表格 -->
    <div class="table-wrapper">
      <AvicTable
        ref="demoTreegrid"
        v-model:expanded-row-keys="expandedRowKeys"
        :stripe="false"
        :bordered="false"
        class="treegrid"
        table-key="demoTreegrid"
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="list"
        :loading="loading"
        :pagination="false"
        :expand-row-by-click="true"
        line-field="demoTitle"
        :indent-size="25"
        @handleRowSelection="handleRowSelection"
        @expand="handleExpand"
      >
        <template #toolBarLeft>
          <a-space>
            <a-button v-hasPermi="['demoTreegrid:add']" type="primary" title="添加" @click="handleAdd(rootTree)">
              <template #icon>
                <plus-outlined />
              </template>
              添加
            </a-button>
            <a-button title="展开" type="primary" ghost @click="handleExpandAll">
              <template #icon>
                <double-right-outlined :rotate="90" />
              </template>
              展开
            </a-button>
            <a-button title="折叠" type="primary" ghost @click="handleCollapseAll">
              <template #icon>
                <double-left-outlined :rotate="90" />
              </template>
              折叠
            </a-button>
          </a-space>
        </template>
        <template #toolBarRight>
          <a-input-search
            v-model:value="searchKeyWord"
            class="opt-btn-commonsearch"
            style="width: 200px"
            placeholder="请输入标题"
            title="请输入标题"
            :allow-clear="true"
            @search="handleKeyWordQuery"
          />
        </template>
        <template #bodyCell="{ column, text, record, index }">
          <!-- 显示字段 -->
          <template v-if="column.dataIndex === 'demoUserIdAlias'">
            <AvicIcon v-if="!record.expanded && record.treeLeaf == 'N'" svg="avic-folder-3-fill" color="#ffb800" />
            <AvicIcon v-if="record.expanded && record.treeLeaf == 'N'" svg="avic-folder-open-fill" color="#ffb800" />
            <avic-icon v-if="record.treeLeaf == 'Y'" svg="avic-file-fill" color="#3370ff" />
            <a href="javascript:;" class="table-detail-link" :title="record.demoTitle" @click.stop="handleDetail(record)">
              {{ record.demoUserIdAlias }}
            </a>
          </template>
          <template v-else-if="column.dataIndex === 'demoSwitch'">
            <a-popconfirm ok-text="确定" cancel-text="取消" @confirm="changeDemoSwitchStatus(record)">
              <template #title>
                确认将该数据改为
                <b>{{ record.demoSwitch === 'Y' ? '无效' : '有效' }}</b>
                吗?
              </template>
              <a-switch
                :key="record.id + record.demoSwitch"
                :checked="getDemoSwitchStatus(record) == 'Y'"
                :title="record.demoSwitch === 'Y' ? '有效' : '无效'"
                checked-children="有效"
                un-checked-children="无效"
              />
            </a-popconfirm>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button v-hasPermi="['demoTreegrid:add']" type="link" class="inner-btn" @click.stop="handleAdd(record)">添加</a-button>
            <a-button v-hasPermi="['demoTreegrid:edit']" type="link" class="inner-btn" @click.stop="handleEdit(record)">编辑</a-button>
            <a-button
              v-if="record.treeLeaf == 'Y'"
              v-hasPermi="['demoTreegrid:delete']"
              type="link"
              class="inner-btn"
              @click.stop="handleDelete(record)"
            >
              删除
            </a-button>
          </template>
        </template>
      </AvicTable>
    </div>
    <!-- 添加页面弹窗 -->
    <DemoTreegridAdd
      v-if="showAddModal"
      ref="addModal"
      :default-tree-level="treeLevel"
      :parent-id="parentNodeId"
      :parent-title="parentTitle"
      @reloadData="reloadData"
      @close="showAddModal = false"
    />
    <!-- 编辑页面弹窗 -->
    <DemoTreegridEdit
      v-if="showEditModal"
      ref="editModal"
      :parent-id="parentNodeId"
      :parent-title="parentTitle"
      :form-id="formId"
      @reloadData="reloadData"
      @close="showEditModal = false"
    />
    <!-- 详情页面弹窗 -->
    <DemoTreegridDetail
      v-if="showDetailModal"
      ref="detailModal"
      :parent-id="parentNodeId"
      :parent-title="parentTitle"
      :form-id="formId"
      @close="showDetailModal = false"
    />
  </div>
</template>
<script lang="ts" setup>
import { useLookup } from '@/utils/hooks/useLookup';
import type { DemoTreegridDto } from '@/api/avic/demo/DemoTreegridApi'; // 引入模块DTO
import {
  getDemoTreegridNode,
  searchDemoTreegrid,
  delDemoTreegrid,
  expandDemoTreegrid,
  updateDemoSwitch
} from '@/api/avic/demo/DemoTreegridApi'; // 引入模块API
import {
  expendNodeForTreegrid,
  expandNodeForTreegrid,
  getAllNodeForTreegrid,
  findNodeForTreegrid,
  deleteNodeForTreegrid,
  getExpandedKeys
} from '@/utils/tree-util'; // 引入树公共方法
// 引入添加页面组件
import DemoTreegridAdd from './DemoTreegridAdd.vue';
// 引入编辑页面组件
import DemoTreegridEdit from './DemoTreegridEdit.vue';
// 引入详情页面组件
import DemoTreegridDetail from './DemoTreegridDetail.vue';
const { proxy } = getCurrentInstance();
const layout = {
  labelCol: { flex: '0 0 120px' },
  wrapperCol: { flex: '1 1 0' }
};
const colLayout = proxy.$colLayout4; // 页面表单响应式布局对象
const columns = [
  {
    title: '标题',
    dataIndex: 'demoTitle',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    fixed: 'left',
    align: 'left'
  },
  {
    title: '用户',
    dataIndex: 'demoUserIdAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    customHeaderCell() {
      return {
        ['class']: 'required-table-title'
      };
    },
    align: 'left'
  },
  {
    title: '部门',
    dataIndex: 'demoDeptIdAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '角色',
    dataIndex: 'demoRoleIdAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '群组',
    dataIndex: 'demoGroupIdAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '岗位',
    dataIndex: 'demoPositionIdAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '单选',
    dataIndex: 'demoRadioName',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '单选（按钮）',
    dataIndex: 'demoRadioButtonName',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '复选',
    dataIndex: 'demoCheckboxName',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '下拉',
    dataIndex: 'demoSelectName',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '下拉多选',
    dataIndex: 'demoSelectMultipleName',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '密级',
    dataIndex: 'secretLevelName',
    ellipsis: true,
    width: 120,
    resizable: true,
    customHeaderCell() {
      return {
        ['class']: 'required-table-title'
      };
    },
    align: 'left'
  },
  {
    title: '开关',
    dataIndex: 'demoSwitch',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '小数',
    dataIndex: 'demoNumber',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'right'
  },
  {
    title: '整数',
    dataIndex: 'demoInteger',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'right'
  },
  {
    title: '日期',
    dataIndex: 'demoDate',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '日期时间',
    dataIndex: 'demoDateTime',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '必填',
    dataIndex: 'demoNotnull',
    ellipsis: true,
    width: 120,
    resizable: true,
    customHeaderCell() {
      return {
        ['class']: 'required-table-title'
      };
    },
    align: 'left'
  },
  {
    title: '编码',
    dataIndex: 'demoCode',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '电话(正则)',
    dataIndex: 'demoPhone',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '邮箱(正则)',
    dataIndex: 'demoEmail',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '网址(正则)',
    dataIndex: 'demoWebsite',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '唯一值',
    dataIndex: 'demoUnique',
    ellipsis: true,
    customHeaderCell() {
      return {
        ['class']: 'required-table-title'
      };
    },
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '弹窗',
    dataIndex: 'demoModalSelectAlias',
    ellipsis: true,
    width: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '多行文本',
    dataIndex: 'demoTextarea',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    ellipsis: true,
    width: 150,
    fixed: 'right'
  }
];
const queryForm = ref<DemoTreegridDto>({}); // 高级查询对象
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: proxy.$settings.table.pageSize || 20 // 每页条数
  },
  searchParams: {
    ...queryForm
  },
  keyWord: ref(''), // 快速查询数据
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});
const showAddModal = ref(false); // 是否展示添加弹窗
const showEditModal = ref(false); // 是否展示编辑弹窗
const showDetailModal = ref(false); // 是否展示详情弹窗
const advanced = ref(false); // 高级搜索 展开/关闭
const list = ref([]); // 表格数据集合
const formId = ref(''); // 当前行数据id
const selectedRowKeys = ref([]); // 选中数据主键集合
const selectedRows = ref([]); // 选中数据行集合
const loading = ref(false);
const searchKeyWord = ref(''); // keyword信息
const isSearchByKeyWord = ref(false); // keyword查询标识
const isAdvancedSearch = ref(false); // 高级查询标识
const expandedRowKeys = ref([]); // 展开数据集合
const rootTree = ref(null); // 树结构根节点
const parentNodeId = ref(''); // 添加节点的初始父节点
const parentTitle = ref(''); // 初始父节点名称
const treeLevel = ref(1);
const { lookupList } = useLookup(['PLATFORM_SEX', 'PLATFORM_CHECK_TYPE', 'PLATFORM_DEGREE']);
const currentLevel = ref(1); // 当前展开的层级
onMounted(() => {
  // 加载表格数据
  getRootNode();
});

/** 加载树表格数据  */
function getRootNode() {
  rootTree.value = null;
  loading.value = true;
  const expandLevel = 2;
  currentLevel.value = 1;
  list.value = [];
  expandedRowKeys.value = [];
  getDemoTreegridNode(expandLevel, '-1')
    .then((res) => {
      if (res.success && res.data.length === 1) {
        [rootTree.value] = res.data;
        list.value = res.data[0].children;
        if (list.value?.length) {
          getExpandedKeys(list.value, expandLevel, expandedRowKeys.value);
        }
        loading.value = false;
      } else {
        proxy.$message.error('初始化根节点失败！');
        loading.value = false;
      }
    })
    .catch(() => {
      console.error('获取根节点失败！');
      loading.value = false;
    });
}
/** 高级查询 查询按钮操作 */
function handleQuery() {
  // 查询区内容全部为空时不进行查询操作
  if (proxy.$checkJsonIsAllBlank(queryForm.value)) {
    proxy.$message.warning('请输入查询条件！');
    return;
  }
  loading.value = true;
  isSearchByKeyWord.value = false;
  isAdvancedSearch.value = true;
  // 高级查询数据处理
  queryParam.searchParams = queryForm.value;
  queryParam.keyWord = '';
  searchTreegrid(null);
}
/** 高级查询 重置按钮操作 */
function resetQuery() {
  queryForm.value = {};
  getRootNode();
}
/** 高级查询 展开/收起 */
function toggleAdvanced() {
  advanced.value = !advanced.value;
}
/** 快速查询逻辑  */
function handleKeyWordQuery() {
  loading.value = true;
  isSearchByKeyWord.value = true;
  isAdvancedSearch.value = false;
  const value = searchKeyWord.value.trim();
  if (value.length) {
    queryParam.keyWord = value;
    searchTreegrid(null);
  } else {
    isSearchByKeyWord.value = false;
    getRootNode();
  }
}
/** 添加 */
function handleAdd(parentTree) {
  treeLevel.value = parentTree.treeLevel;
  parentTitle.value = parentTree.demoTitle;
  parentNodeId.value = parentTree.id;
  showAddModal.value = true;
}
/** 编辑 */
function handleEdit(row) {
  // 编辑节点
  parentNodeId.value = row.parentId;
  const parentNodes = findNodeForTreegrid(list.value, 'id', row.parentId);
  const parentNode = parentNodes.length === 1 ? parentNodes[0] : null;
  if (parentNode === null || parentNode.length === 0) {
    parentTitle.value = rootTree.value.demoTitle;
  } else {
    parentTitle.value = parentNode.demoTitle;
  }
  formId.value = row.id;
  showEditModal.value = true;
}
/** 详情 */
function handleDetail(row) {
  parentNodeId.value = row.parentId;
  const parentNodes = findNodeForTreegrid(list.value, 'id', row.parentId);
  const parentNode = parentNodes.length === 1 ? parentNodes[0] : null;

  if (parentNode == null || parentNode.length === 0) {
    parentTitle.value = rootTree.value.demoTitle;
  } else {
    parentTitle.value = parentNode.demoTitle;
  }
  formId.value = row.id;
  showDetailModal.value = true;
}
/** 删除 */
function handleDelete(treeNode) {
  proxy.$confirm({
    title: '确认要删除选择的数据吗?',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      loading.value = true;
      delDemoTreegrid(treeNode.id)
        .then((res) => {
          if (res.success) {
            // 匹配第一层节点并删除
            if (treeNode.treeLevel === 2) {
              const beforeLength = list.value.length;
              list.value = list.value.filter((item) => item.id !== treeNode.id);
              if (beforeLength !== list.value.length) {
                loading.value = false;
                return;
              }
            } else {
              // 递归删除
              deleteNodeForTreegrid(list.value, treeNode);
            }
            list.value = proxy.$lodash.cloneDeep(list.value);
            proxy.$message.success('删除成功！'); // 提示成功
          }
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
/** 添加、编辑、删除、配置权限后默认展开至已修改项 */
function setExpandedRowKeys(treeId) {
  const nodes = findNodeForTreegrid(list.value, 'id', treeId);
  const node = nodes.length === 1 ? nodes[0] : null;
  if (!node) {
    expandedRowKeys.value = [];
  } else {
    const rowKeys = node.treePath.split('/');
    'Y' === node.treeLeaf || !node.children ? rowKeys.pop() : rowKeys;
    expandedRowKeys.value = rowKeys;
  }
}
/** 搜索树 */
function searchTreegrid(expandTreeId) {
  list.value = [];
  expandedRowKeys.value = [];

  searchDemoTreegrid(queryParam)
    .then((res) => {
      if (res.success) {
        list.value = res.data[0].children || [];
        // 查询后展开全部节点
        expandedRowKeys.value = getAllNodeForTreegrid(list.value, 'id');
        if (proxy.$objIsNotBlank(expandTreeId)) {
          setExpandedRowKeys(expandTreeId);
        }
      } else {
        list.value = [];
      }
      loading.value = false;
    })
    .catch(() => {
      list.value = [];
      loading.value = false;
    });
}
/** 重载数据 */
function reloadData(expandTreeId) {
  loading.value = true;
  if (isSearchByKeyWord.value) {
    const value = searchKeyWord.value.trim();
    queryParam.keyWord = value;
    searchTreegrid(expandTreeId);
  } else if (isAdvancedSearch.value) {
    // 高级查询数据处理
    queryParam.searchParams = queryForm.value;
    queryParam.keyWord = '';
    searchTreegrid(expandTreeId);
  } else {
    expandDemoTreegrid(expandTreeId)
      .then((res) => {
        if (res.success && res.data && res.data.length) {
          [rootTree.value] = res.data;
          list.value = res.data[0].children || [];
          setExpandedRowKeys(expandTreeId);
        } else {
          list.value = [];
        }
        loading.value = false;
      })
      .catch(() => {
        list.value = [];
        loading.value = false;
      });
  }
}
/** 展开父级 */
function handleExpand(expanded, record) {
  record.expanded = expanded;
  if (expanded) {
    if (record.treeLeaf === 'N' && (!record.children || !record.children.length)) {
      loading.value = true;

      getDemoTreegridNode(1, `${record.id}`)
        .then((res) => {
          if (res.success) {
            expendNodeForTreegrid(list.value, record.id, res.data);
            expandedRowKeys.value.push(record.id);
          }
          loading.value = false;
        })
        .catch(() => {
          list.value = [];
        });
    } else {
      expandedRowKeys.value.push(record.id);
    }
  } else {
    expandedRowKeys.value = expandedRowKeys.value.filter((item) => item !== record.id);
  }
}
/** 记录选中项 */
function handleRowSelection(obj) {
  if (obj.selectedRowKeys) {
    selectedRowKeys.value = obj.selectedRowKeys;
  }
  if (obj.selectedRows) {
    selectedRows.value = obj.selectedRows;
  }
}
/** 改变开关状态 */
function changeDemoSwitchStatus(record) {
  const tip = record.demoSwitch === 'Y' ? '无效' : '有效';
  const updateValue = record.demoSwitch === 'Y' ? 'N' : 'Y';
  updateDemoSwitch(record.id, updateValue).then((res) => {
    if (res.success) {
      const nodes = findNodeForTreegrid(list.value, 'id', record.id);
      if (nodes !== undefined && nodes.length === 1) {
        nodes[0].demoSwitch = updateValue;
      }
      proxy.$message.success(`${tip}成功！`);
    }
  });
}
/** 查询开关状态 */
function getDemoSwitchStatus(record) {
  const nodes = findNodeForTreegrid(list.value, 'id', record.id);
  return nodes.length === 1 ? nodes[0].demoSwitch : 'N';
}
/** 全部折叠 */
function handleCollapseAll() {
  expandedRowKeys.value = [];
}
/** 全部展开 */
function handleExpandAll() {
  if (loading.value) return;
  expandAll();
}
/** 展开 */
async function expandAll() {
  await expandToCurrentLevel();
  currentLevel.value += 1;
}
/** 一层一层逐级展开 异步：只展开一层，同步：展开到记录的层级 */
async function expandToCurrentLevel(data, treeLevel = 0) {
  for (const record of data || list.value) {
    await expandRecord(record);
    if (treeLevel < currentLevel.value) {
      const { children } = record;
      if (children?.length > 0) {
        await expandToCurrentLevel(children, treeLevel + 1);
      }
    }
  }
}
/** 展开折叠的层 */
async function expandRecord(record) {
  if (record.treeLeaf === 'N' && (!record.children || !record.children.length)) {
    loading.value = true;
    const res = await getDemoTreegridNode(1, record.id);
    if (res.success) {
      expandNodeForTreegrid(list.value, record.id, res.data);
      expandedRowKeys.value.push(record.id);
    }
    loading.value = false;
  } else {
    expandedRowKeys.value.push(record.id);
  }
}
</script>
